<template>
    <div>
      <nav-header></nav-header>
      <nav-bread>
         <span >商品</span>
      </nav-bread>
<!--商品详情-->
      <div class="accessory-result-page accessory-page">
        <div class="container">
          <div class="filter-nav">
            <span class="sortby">排序:</span>
            <a href="javascript:;" class="default cur">默认</a>
            <a href="javascript:;" @click="sortGoods" class="price">价格</a>
         <!--   响应式的小屏幕排序-->
            <a href="javascript:;" class="filterby stopPop" @click="showFilter">排序</a>
          </div>
          <div class="accessory-result">
<!-- 价格区间 -->
            <div class="filter stopPop" id="filter" :class="{'filterby-show':filterBy}">
              <dl class="filter-price">
                <dt>价格区间:</dt>
                <dd><a href="javascript:;" :class="{cur:priceChecked == 'all'}" @click="setFilter('all') ">全部商品</a></dd>
                <dd v-for="(price,index) in priceFilter" @click="setFilter(index)">
                  <a href="javascript:;"  :class="{cur:priceChecked == index}">{{price.startPrice}} - {{price.endPrice}}</a>
                </dd>
              </dl>
            </div>

<!-- 商品列表 -->
            <div class="accessory-list-wrap">
              <div class="accessory-list col-4">
                <ul>
                  <li v-for="item in list">
                    <div class="pic">
                      <a href="#"><img v-lazy="'/static/'+item.productImage" alt=""></a>
                    </div>
                    <div  class="main">
                      <div class="name">{{item.productName}}</div>
                      <div class="price">{{item.salePrice}}</div>
                      <div class="btn-area">
                        <Button icon="plus" type="info" long size="large" @click="addToCart(item.productId)">加入购物车</Button>
                      </div>
                    </div>
                  </li>
                </ul>
<!--  滚动加载插件-->
                <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                  <img v-show="loading" src="../assets/loading-spinning-bubbles.svg" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
<!-- 遮罩层-->
<div class="md-overlay" v-show="shadeFlag" ></div>

<modal :mdShow="mdShow" @close = 'closeModal'>
  <p slot="message">请先登录，否则无法加入购物车</p>
  <div slot="btnGroup">
    <a class="btn btn--m" @click="mdShow = false">关闭</a>
  </div>
</modal>


<modal :mdShow="mdShowCart" @close = 'closeModal'>
  <p slot="message">加入购物车成功</p>
  <div slot="btnGroup">
    <a class="btn btn--m" @click="mdShowCart = false">继续购物</a>

    <router-link to="/cart" class="btn btn--m" @click="mdShow = false">查看购物车</router-link>
  </div>
</modal>
     <nav-footer></nav-footer>
    </div>
</template>
<script>
  import NavHeader from '../components/NavHeader.vue'
  import NavFooter from '../components/NavFooter.vue'
  import NavBread from '../components/NavBread.vue'
  import modal from '../components/modal.vue'
    export default{
      components:{
        NavHeader,NavFooter,NavBread,modal
      },
        data(){
            return {
            list:[],
              priceFilter:[
                  {startPrice:0,endPrice:100},
                  {startPrice:100,endPrice:500},
                  {startPrice:500,endPrice:1000},
                  {startPrice:1000,endPrice:5000},
              ],
              priceChecked:'all',//选中的价格区间
              filterBy:false,//响应式排序
              shadeFlag:false,//遮罩
              pageSize:8,
              page:1,
              sortFlag:true,//升降序排列flag
              busy:true, //插件infinite-scroll的值
              loading:false,//'加载中'的svg图片
              mdShow:false,//模态框是否显示
              mdShowCart:false
            }
        },
      mounted(){
            this.getGoodsData()
      },
      methods:{
            getGoodsData(flag){
              let param={
                  page:this.page,
                  pageSize:this.pageSize,
                  sort:this.sortFlag?1:-1, //传入后台给mongoose的sort方法使用
                  priceChecked:this.priceChecked
              };
              this.loading = true;
                this.$http.get('/goods/list',{params:param}).then(res=>{
                    if(res.data.status == '0'){
                      //flag为true表示需要分页
                        if(flag){
                          this.list=this.list.concat(res.data.result.list);
                      //count是后台定义的，表示数据条数
                    if(res.data.result.count ==0 ){
                              this.busy = true
                          }else{
                              this.busy = false
                          }
                        }else{
                          this.list=res.data.result.list;
                          this.busy = false
                        }
                    }else{
                        this.list = []
                    }
                });
              this.loading = false
            },
        //弹出响应式排序
            showFilter(){
              this.filterBy = true;
              this.shadeFlag = true
           },
        //关闭响应式排序
            closeShade(){
              this.filterBy = false;
              this.shadeFlag = false
            },

            setFilter(index){
              this.priceChecked = index;
              this.closeShade();
              this.page = 1;
              this.getGoodsData()
            },
            sortGoods(){
                this.sortFlag = !this.sortFlag;
                this.page = 1;
                this.getGoodsData()
            },
            //滚动加载插件的方法
            loadMore(){
              this.busy = true;
              setTimeout(() => {
                this.page++;
                this.getGoodsData(true);
                this.busy = false;
              }, 500);
            },
        //加入购物车
            addToCart(productId){
              this.$http.post('/goods/addCart',{productId:productId}).then(res=>{
                  if(res.data.status == '0'){
                    this.mdShowCart = true
                  }else{
                      this.mdShow = true
                  }
              })
          },
             closeModal(){
                this.mdShow = false;
                this.mdShowCart = false;
         }
        }
    }
</script>
